<template>
  <xdh-curd class="config-person" :mixin="personMixin" name="person" ref="tableCurd" :addable="false" :query.sync="query" :model="model" :handle-column-width="220" :dialog-width="'1000px'" :dialog-height="'90%'" :form-label-width="'120px'">
    <!-- 查询表单 -->
    <template slot="filter-items">
      <el-form-item prop="keyword">
        <el-input placeholder="关键字" v-model="query.keyword"></el-input>
      </el-form-item>
    </template>
    <template slot="table-tool">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleOpenAdd">添加人员</el-button>
      <el-button type="primary" size="mini" @click="importBath">批量导入人员</el-button>
      <el-button type="primary" size="mini" @click="exportModel">导出模板</el-button>
    </template>
    <!-- 显示列表 -->
    <template slot="table-columns" slot-scope="scope">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="国籍" prop="country"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="出生日期" prop="birthday"></el-table-column>
      <el-table-column label="创建日期" prop="createTime"></el-table-column>
      <el-table-column label="创建人" prop="creator"></el-table-column>
    </template>
    <!-- 操作按钮-->
    <template slot="table-handle-column" slot-scope="scope">
      <el-button size="mini" @click="view(scope.row, scope.$index)">查看
      </el-button>
    </template>
    <!-- 新增/修改弹窗 -->
    <template slot="dialog-form-items" slot-scope="prop">
      <div class="dialog-con">
        <el-row style="text-align:center;">
          <h4>
            基本信息
          </h4>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="prop.model.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="prop.model.sex" size="small">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="国籍" prop="country">
              <el-input v-model="prop.model.country" size="small"></el-input>
            </el-form-item>
            <el-form-item label="护照号" prop="passno">
              <el-input v-model="prop.model.passno" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="prop.model.birthday" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:center;">
            <img class="head-image" :src="'/static/img/head.png'" />
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否在厦门" prop="area">
              <el-radio-group v-model="prop.model.area" size="small">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管辖单位" prop="org">
              <el-input v-model="prop.model.org" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="户籍详细地址" prop="addr">
              <el-input type="textarea" v-model="prop.model.addr" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="居住地详细地址" prop="live">
              <el-input type="textarea" v-model="prop.model.live" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分组" prop="group">
              <el-select filterable v-model="prop.model.group" placeholder="请选择">
                <el-option v-for="item in groups" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别" prop="level">
              <el-select filterable v-model="prop.model.level" placeholder="请选择">
                <el-option v-for="item in levels" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input size="small" type="textarea" :rows="3" v-model="prop.model.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </template>
  </xdh-curd>
</template>
<script>
  import XdhCurd from '@/widgets/xdh-curd';
  import personMixin from '@/base/mixin/person';
  import groupMixin from '@/base/mixin/group';
  import levelMixin from '@/base/mixin/level';
  export default {
    mixins: [groupMixin, levelMixin],
    components: {
      XdhCurd
    },
    data() {
      return {
        groups: [],
        levels: [],
        query: {
          keyword: ''
        },
        model: {
          name: '',
          title: ''
        },
        personMixin: personMixin
      };
    },
    methods: {
      handleOpenAdd() {
        this.$refs.tableCurd.dialogMode = 'insert';
        this.$refs.tableCurd.currentModel = { ...this.$refs.tableCurd.model };
        this.$refs.tableCurd.dialogClosed = false;
      },
      importBath() {
        this.$message({
          type: 'info',
          message: '批量导入功能开发中'
        });
      },
      exportModel() {
        this.$message({
          type: 'info',
          message: '导出模板功能开发中'
        });
      },
      view(row, index) {
        console.log(row, index);
      }
    },
    created() {
      this.fetchGroup().then(res => {
        res.list.forEach((r, idx) => {
          this.groups.push({
            label: r.name,
            value: r.id
          });
        });
      });
      this.fetchLevel().then(res => {
        res.list.forEach((r, idx) => {
          this.levels.push({
            label: r.name,
            value: r.id
          });
        });
      });
    }
  };
</script>
<style  type="text/scss" lang="scss" scoped>
  .head-image {
    margin: 0 15px;
  }
  .dialog-con {
    padding: 0 20px;
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>